<template>
  <div>
    <el-form ref="form" :model="coupon" label-width="80px">
      <el-form-item label="优惠券名称">
        <el-input v-model="coupon.couponName"></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <div class="block">
          <el-date-picker v-model="coupon.startTime" type="datetime" placeholder="开始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 130px"></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="结束时间">
        <div class="block">
          <el-date-picker v-model="coupon.endTime" type="datetime" placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 130px"></el-date-picker>
        </div>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="findCouponList" plain>查询</el-button>

    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true">新增优惠券</el-button>

    <el-dialog title="优惠券详情" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="coupon">
        <el-form-item label="优惠卷类型" :label-width="formLabelWidth">
          <el-radio v-model="coupon.couponType" label="0">全场赠券</el-radio>
          <el-radio v-model="coupon.couponType" label="1">会员赠券</el-radio>
          <el-radio v-model="coupon.couponType" label="2">购物赠券</el-radio>
          <el-radio v-model="coupon.couponType" label="3">注册赠券</el-radio>
        </el-form-item>
        <el-form-item label="优惠券名字" :label-width="formLabelWidth">
          <el-input v-model="coupon.couponName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="coupon.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额" :label-width="formLabelWidth">
          <el-input v-model="coupon.amount" autocomplete="off">
            <template slot="prepend">¥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每人限领张数" :label-width="formLabelWidth">
          <el-input v-model="coupon.perLimit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="使用门槛" :label-width="formLabelWidth">
          <el-input v-model="coupon.minPoint" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-input v-model="coupon.startTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-input v-model="coupon.endTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="使用类型[0->全场通用；1->指定分类；2->指定商品]" :label-width="formLabelWidth">
          <el-input v-model="coupon.useType" autocomplete="off">
            <el-radio v-model="coupon.couponType" label="0">全场通用</el-radio>
            <el-radio v-model="coupon.couponType" label="1">指定分类</el-radio>
            <el-radio v-model="coupon.couponType" label="2">指定商品</el-radio>
          </el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="coupon.note" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发行数量" :label-width="formLabelWidth">
          <el-input v-model="coupon.publishCount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="已使用数量" :label-width="formLabelWidth">
          <el-input v-model="coupon.useCount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="领取数量" :label-width="formLabelWidth">
          <el-input v-model="coupon.receiveCount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可以领取的开始日期" :label-width="formLabelWidth">
          <el-input v-model="coupon.enableStartTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可以领取的结束日期" :label-width="formLabelWidth">
          <el-input v-model="coupon.enableEndTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可以领取的会员等级[0->不限等级，其他-对应等级]" :label-width="formLabelWidth">
          <el-input v-model="coupon.memberLevel" autocomplete="off">
            <el-radio v-model="coupon.couponType" label="0">不限等级</el-radio>
            <el-radio v-model="coupon.couponType" label="1">指定分类</el-radio>
            <el-radio v-model="coupon.couponType" label="2">指定商品</el-radio>
          </el-input>
        </el-form-item>
        <el-form-item label="发布状态[0-未发布，1-已发布]" :label-width="formLabelWidth">
          <el-input v-model="coupon.publish" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-table ref="multipleTable"  :data="tableData" tooltip-effect="dark" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column fixed prop="id" label="id" width="80"></el-table-column>
        <el-table-column prop="couponType" label="优惠卷类型" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.couponType == 0" type="success">全场赠券</el-tag>
            <el-tag v-if="scope.row.couponType == 1" type="success">会员赠券</el-tag>
            <el-tag v-if="scope.row.couponType == 2" type="success">购物赠券</el-tag>
            <el-tag v-if="scope.row.couponType == 3" type="success">注册赠券</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="couponImg" label="优惠券图片" width="100"></el-table-column>
        <el-table-column prop="couponName" label="优惠卷名字" width="120"></el-table-column>
        <el-table-column prop="num" label="数量" width="100"></el-table-column>
        <el-table-column prop="amount" label="金额" width="100"></el-table-column>
        <el-table-column prop="perLimit" label="每人限领张数" width="100"></el-table-column>
        <el-table-column prop="minPoint" label="使用门槛" width="100"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="200"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="200"></el-table-column>
        <el-table-column prop="useType" label="使用类型" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.useType == 0" type="success">全场通用</el-tag>
            <el-tag v-if="scope.row.useType == 1" type="success">指定分类</el-tag>
            <el-tag v-if="scope.row.useType == 2" type="success">指定商品</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="备注" width="100"></el-table-column>
        <el-table-column prop="publishCount" label="发行数量" width="100"></el-table-column>
        <el-table-column prop="useCount" label="已使用数量" width="100"></el-table-column>
        <el-table-column prop="receiveCount" label="领取数量" width="100"></el-table-column>
        <el-table-column prop="enableStartTime" label="领取的开始日期" width="180"></el-table-column>
        <el-table-column prop="enableEndTime" label="领取的结束日期" width="180"></el-table-column>
        <el-table-column prop="code" label="优惠码" width="120"></el-table-column>
        <el-table-column prop="memberLevel" label="领取的会员等级" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.memberLevel == 1" type="success">不限等级</el-tag>
            <el-tag v-if="scope.row.memberLevel == 2" type="success">铜牌会员</el-tag>
            <el-tag v-if="scope.row.memberLevel == 3" type="success">银牌会员</el-tag>
            <el-tag v-if="scope.row.memberLevel == 4" type="success">金牌会员</el-tag>
            <el-tag v-if="scope.row.memberLevel == 5" type="success">钻石会员</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publish" label="发布状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.publish == 0" type="success">未发布</el-tag>
            <el-tag v-if="scope.row.publish == 1" type="success">已发布</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="viewCoupon(scope.row)" type="text" size="small">查看优惠券领取记录</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {addCoupon, getCouponList} from "@/api/coupon/coupon";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        tableData:[],
        coupon:{},
        dialogFormVisible:false,
        formLabelWidth:'120px'
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      //查询优惠券列表
      findCouponList(){
        getCouponList(this.coupon).then(res => {
          this.tableData = res.data
        })
      },
      // 查看优惠券领取记录
      viewCoupon(row){
        this.$router.push({name:'CouponHistory'})
      },
      submit(){
        this.$refs['form'].validate(valid=>{
          if(valid!=null){

          }else{
            addCoupon(this.coupon).then(res=>{
              this.$message.success('新增成功');
              this.dialogFormVisible=false;
              this.findCouponList();
            })
          }
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.findCouponList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
